<template>
  <div class="top-nav">
    <div class="top-nav-list">
      <ul>
        <!-- 判断用户是否登录 -->
        <li v-if="form !== null">
          <a @click="exit" href="#">退出登录</a>
        </li>
        <li v-else>
          <a href="#">
            <router-link to="/">登录</router-link>
          </a>
        </li>
        <li @click="dialogFormVisible = true">
          <a href="#">修改密码</a>
        </li>
        <li @click="notice">
          <a href="#">系统公告</a>
        </li>
        <li @click="redisterRider" v-if="form.isRider == 0">
          <a href="#">注册骑手</a>
        </li>
        <li @click="riderCenter" v-else="form.isRider == 1">
          <a href="#">骑手中心</a>
        </li>
        <li @click="order">
          <a href="#">我的订单</a>
        </li>
        <li @click="dialog = true">
          <a href="#">个人信息</a>
        </li>
        <li>
          <a href="#"><router-link to="/home">首页</router-link></a>
        </li>
      </ul>
    </div>
    <el-drawer ref="drawerRef" size="35%" v-model="dialog" title="个人信息" direction="rtl">
      <div class="demo-drawer__content">
        <el-form class="form" :model="form" label-width="120px">
          <!-- 头像上传 -->
          <el-upload class="avatar-uploader" :action="avatar" :show-file-list="false" :on-success="handleAvatarSuccess">
            <img class="header-avatar" v-if="this.form.avatarUrl != null" :src="this.form.avatarUrl" :size="small" />
            <el-icon v-else>
              <img :src="imageUrl" class="bg-avatar" />
            </el-icon>
          </el-upload>

          <el-form-item label="账号">
            <el-input v-model="form.username" disabled autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="姓名">
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio style="margin-right: 15px;" value="0" :label="0">男</el-radio>
              <el-radio value="1" :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="手机号码">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="送货地址">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="邮箱">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="金额">
            <el-input disabled v-model="form.money" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button class="sumbit" type="success" @click="recharge">充值金额</el-button>
            <el-button class="sumbit" type="warning" @click="dialogFormVisible = true">修改密码</el-button>
            <el-button class="sumbit" type="primary" @click="onClick(this.form)">提交</el-button>
            <el-button class="cancel" type="danger" @click="dialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>


    <!-- 注册骑手弹出窗 -->
    <el-dialog v-model="dialogFormRider" title="注册骑手" width="500">
      <el-form label-position="right" label-width="110px" :model="riderinfo">
        <el-form-item style="margin-bottom: 10px;" label="骑手姓名">
          <el-input v-model="riderinfo.ridername" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="riderinfo.riderphone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button style="width: 60px;" @click="dialogFormRider = false">取消</el-button>
          <el-button style="width: 60px;" type="primary" @click="redisterRiderBtn">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改密码弹出窗 -->
    <el-dialog v-model="dialogFormVisible" title="修改密码框" width="500">
      <el-form label-position="right" label-width="110px" :model="form">
        <el-form-item style="margin-bottom: 10px;" label="请输入新的密码">
          <el-input type="password" v-model="password.value1" autocomplete="off" />
        </el-form-item>
        <el-form-item label="请确认密码">
          <el-input type="password" v-model="password.value2" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button style="width: 60px;" @click="dialogFormVisible = false">取消</el-button>
          <el-button style="width: 60px;" type="primary" @click="passwordEdit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import { update, getUserById, updatePassword, userRegisterRider } from "../../api/user/User.js";
import { uploadUrl } from '../../api/common/File.js'

export default {
  name: "CommonNav",
  data() {
    return {
      riderinfo: {},
      password: {
        value1: '',
        value2: ''
      },
      dialogFormVisible: false,
      dialogFormRider: false,
      imageUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      userinfo: JSON.parse(localStorage.getItem('userinfo')),
      avatar: "",
      dialog: false,
      form: {}
    };
  },
  mounted() {
    this.avatar = uploadUrl()
    this.form = JSON.parse(localStorage.getItem("userinfo"));
    this.getUserInfo(this.form.id);
  },
  methods: {
    notice(){
      this.$router.push({
        path: 'notice'
      })
    },
    // 订单
    order() {
      this.$router.push({
        path: 'order'
      })
    },
    //打开骑手注册弹窗
    redisterRider() {
      this.dialogFormRider = true
    },
    // 注册骑手按钮
    redisterRiderBtn() {
      this.riderinfo.userId = this.userinfo.id
      this.riderinfo.imgUrl = this.userinfo.avatarUrl
      this.riderinfo.status = 0
      userRegisterRider(this.riderinfo).then(res => {
        this.dialogFormRider = false
        if (res.data.code == 200) {
          ElMessage({
            type: 'success',
            message: '注册成功'
          })
        }
      })
    },
    // 骑手中心
    riderCenter() {
      this.$router.push({
        path: 'rider',
        query: { userId: this.form.id }
      })
    },
    // 修改密码
    passwordEdit() {
      if (this.password.value1 != this.password.value2) {
        return ElMessage({
          type: 'error',
          message: '输入密码不一致，请重新输入'
        })
      } else {
        this.form.password = this.password.value1
        updatePassword(this.form).then(res => {
          if (res.data.code == 200) {
            this.dialogFormVisible = false
            this.getUserInfo(this.form.id);
            this.password = {}
            ElMessage({
              type: 'success',
              message: '修改成功'
            })
          } else {
            ElMessage({
              type: 'error',
              message: '修改失败'
            })
          }
        })
      }
    },
    // 充值金额
    recharge() {
      ElMessageBox.prompt('请输入需要充值的金额', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        // 判断金额是否过大
        if (value >= 1000) {
          return ElMessage({
            type: 'error',
            message: '金额过大，请重新输入',
          })
        }
        if (parseFloat(this.form.money) + parseFloat(value) > 1000) {
          return ElMessage({
            type: 'error',
            message: '充值金额过大，请重新输入',
          })
        }
        if (this.form.money >= 1000) {
          return ElMessage({
            type: 'error',
            message: '拥有金额不允许超过1000元',
          })
        }
        // 修改金额
        this.form.money = parseFloat(this.form.money) + parseFloat(value)
        update(this.form).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            ElMessage({
              type: 'success',
              message: '充值成功',
            })
            this.getUserInfo(this.form.id);
          } else {
            ElMessage({
              type: 'error',
              message: '充值失败',
            })
          }
        })
      })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消充值',
          })
        })
    },
    // 获取用户信息
    getUserInfo(id) {
      getUserById(id).then(res => {
        if (res.data.code == "200") {
          // 发送请求从数据库实时获取用户信息
          this.form = res.data.data;
          localStorage.setItem("userinfo", JSON.stringify(this.form));
        }
      });
    },
    // 退出登录
    exit() {
      // 清除浏览器缓存信息
      localStorage.removeItem("userinfo");
      localStorage.removeItem("riderInfo");
      return this.$router.push({
        path: "/"
      });
    },
    // 实时更换头像
    handleAvatarSuccess(res) {
      this.form.avatarUrl = res;
    },

    // 修改个人信息
    onClick(form) {
      update(form).then(res => {
        console.log(res);
        if (res.data.code == "200") {
          ElMessage({
            message: "修改成功",
            type: "success",
            duration: 3000
          });
        }
        // 更新浏览器信息
        localStorage.setItem("userinfo", JSON.stringify(form));
        // 获取更新后的信息
        this.form = JSON.parse(localStorage.getItem("userinfo"));
        // 关闭弹窗
        this.dialog = false;
      })
        .catch(err => { });
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: black;
}

li {
  list-style: none;
}

.top-nav {
  width: 100%;
  height: 40px;
  background-image: linear-gradient(-60deg, #ff5858 0%, #FF8818 100%);
}

/*
background-image:linear-gradient(120deg,#f6d365 0%, #FF8818 100%);
#FFBCD1
background-color: #FF8818;
*/
.top-nav-list {
  width: 1220px;
  height: 40px;
  margin: 0 auto;
}

.top-nav ul li {
  float: right;
  height: 40px;
  line-height: 40px;
  width: 80px;
}

.top-nav ul li a {
  color: aliceblue;
}

.top-nav-list ul li a:hover {
  transition: 0.3s;
  color: rgb(221, 225, 228);
}

.cancel {
  margin-top: 20px;
  width: 70px;
  height: 30px;
}

.sumbit {
  margin-top: 20px;
  width: 70px;
  height: 30px;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 450px;
}

.header-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.bg-avatar {
  width: 70px;
  height: 70px;
}

</style>